<template>
  <div class="log-img">
    <div class="img-wrapper" @mousemove.self="animate">
      <div class="log1">
        <img src="../../../assets/log01.png" alt />
      </div>
      <div class="log2">
        <img src="../../../assets/log01.png" alt />
      </div>
      <div class="log3" :style="{left: xNumber + 'px', bottom: yNumber + 'px'}">
        <img src="../../../assets/log02.png" alt />
      </div>
      <div class="log4" :style="{right: xNumber + 'px', bottom: yNumber + 'px'}">
        <img src="../../../assets/log03.png" alt />
      </div>
      <div class="log5">
        <img src="../../../assets/log04.png" alt />
      </div>
      <div class="text1">
        <p>来这里吧！</p>
        <p>登录就有了!</p>
      </div>
      <div class="text2">
        <p>我想要一些API做开发</p>
        <p>还想要百度网盘超级VIP</p>
        <p>唔：免费的VPN</p>
        <p>喜马拉雅的VIP</p>
        <p>看视频也要VIP</p>
        <p>学习资料，视频资料也要</p>
        <p>还有，还有。。。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "log-img",
  data() {
    return {
      xNumber: 20,
      yNumber: 30
    };
  },
  mounted() {},
  methods: {
    gotoPage() {
      console.log(123);
    },
    animate(e) {
      this.xNumber = e.offsetX / 50;
      this.yNumber = 30 - e.offsetY / 50;
    }
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
@keyframes ani1 
  80%
    top: 80px
  82%
    top: 90px
  90%
    top: 70px
  92%
    top: 90px
  100%
    top: 80px
@keyframes ani2
  70%
    right: 23%
  100%
    right: 25%
.log-img
  width: 100%
  height: 100%
  .img-wrapper
    width: 100%
    height: 100%
    position: relative
    background-color: #fff
    >div
      position: absolute
      pointer-events: none
    .log1
      width: 200px
      height: 130px
      left: 80px
      top: 80px  
      overflow: hidden
      transform: rotate(180deg)
      >img
        width: 100%
        height: 100% 
    .log2
      width: 200px
      height: 130px
      right: 60px
      top: 120px  
      overflow: hidden
      >img
        width: 100%
        height: 100%    
    .log3
      width: 220px
      height: 370px
      overflow: hidden
      >img
        width: 100%
        height: 100%
    .log4
      width: 230px
      height: 280px
      overflow: hidden
      >img
        width: 100%
        height: 100%
    .log5
      width: 120px
      height: 60px
      right: 25%
      bottom: 20px
      overflow: hidden
      animation: ani2 30s infinite
      >img
        width: 100%
        height: 100%
    .text1
      left: 80px
      top: 80px
      color: #333
      font-weight: 700
      line-height: 1.3em
      font-size: 30px
      width: 200px    
      cursor: pointer  
      animation: ani1 10s infinite
      p
        @include flex(center,center)
        width: 100%
    .text2
      right: 80px
      top: 100px
      text-align: right
      line-height: 1.3em   
</style>